<template>
    <div class="page">
        <div class="table-head-tabs">
            <div class="item">
                <img src="../../assets/icon-add.png">
                <span>发布</span>
            </div>
            <div class="item">
                <img src="../../assets/icon-filter.png">
                <span>筛选</span>
            </div>
            <div class="item" @click="showTable = !showTable">
                <img src="../../assets/icon-liebiao1.png">
                <span>切换</span>
            </div>
        </div>

        <swiper :options="swiperOptions" :auto="2000" :height="180"/>

        <capital-info class="bg-white" v-for="(item, key) in capital" :key="key" :data="item" @onclick="handleClickCapital"/>
    </div>
</template>

<style lang="less" scoped>

    @import '../../style/variable';

    .page{
        .table-head-tabs{
            display: flex;
            .item{
                flex: 1;
                text-align: center;
                img{
                    height: 1rem;
                    margin: 1.15rem .5rem;
                    vertical-align: bottom;
                }
                span{
                    font-size: 1.1rem;
                    line-height: 3.3rem;
                }
            }
        }

    }

</style>

<script>
    export default {
        data (){
            const swiperOptions = [
                {
                    src: 'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
                    to: '/same'
                },
                'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
            ];

            const capital = Array(4).fill({
                name: '某大型民营跨国集团2017年私募债',
                amount: '20亿',
                profit: '5.8-7.9%',
                level: '主体AAA/债项AA+',
                term: '24月',
                country: '是',
                guarantee: '有',
            });

            return {swiperOptions, capital}
        },
        methods: {
            handleClickCapital(){
                this.$router.push('/same/assetsDetail');
            }
        }
    }
</script>